<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout :: common_header(~{::title})">
    <title>直播数据-OA办公系统</title>

</head>
<body th:replace="layout :: common_body(~{::div.layui-body})">
<div class="layui-body" style="padding:15px;">
    <div class="layui-tab layui-tab-brief" lay-filter="demo">
        <ul class="layui-tab-title">
            <li class="layui-this">直播数据</li>
        </ul>
    </div>
    <style>
        .hideAddress{
            width: 300px;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
    <!-- content starts -->
    <!--    <blockquote class="layui-elem-quote">订单总览</blockquote>-->

    <fieldset class="layui-elem-field">
        <legend>按条件搜索</legend>
        <div class="layui-field-box">
            <form class="layui-form layui-form-pane1" method="get">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <select name="accountId" id="accountId">
                                <option value="">新媒体账号</option>
                                <option th:each="item:${mediaList}" th:value="${item.id}"
                                        th:text="${item.type+'--'+item.name}">
                                </option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">直播时间</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" name="startTime" id="startTime" autocomplete="off"
                                   placeholder="yyyy-MM-dd">
                        </div>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" name="endTime" id="endTime" autocomplete="off"
                                   placeholder="yyyy-MM-dd">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <button type="submit" class="layui-btn">搜索</button>
                        <i>总共：<span style="color: red" th:text="${totalSize}"></span>条记录</i>
                    </div>
                </div>
                <div class="layui-form-item">

                </div>

            </form>
        </div>
    </fieldset>

    <!-- start dd-wrapper -->
    <link rel="stylesheet" href="/goods/order.css"/>
    <div class="dd-wrapper">
        <table class="dd-table">
            <tr>
                <th>ID</th>
                <th>直播日期</th>
                <th>直播时长</th>
                <th>账号</th>
                <th>观众总数</th>
                <th>新增粉丝</th>
                <th>评论数</th>
<!--                <th>观众来源-视频推荐</th>-->
<!--                <th>观众来源-直播广场</th>-->
<!--                <th>观众来源-同城</th>-->
<!--                <th>观众来源-关注页</th>-->
<!--                <th>观众来源-其他</th>-->
                <th>订单数</th>
                <th>订单金额</th>
                <th></th>
            </tr>
            <tr th:each="item:${lists}">
                <td th:text="${item.id}"></td>
                <td>
                    <p th:text="${item.liveDate}"></p>
                </td>
                <td>
                    <span th:text="${item.startTime}"></span> - <span th:text="${item.endTime}"></span>
                </td>
                <td th:text="${item.accountName}"></td>
                <td th:text="${item.viewCount}"></td>
                <td th:text="${item.newUser}"></td>
                <td th:text="${item.commentCount}"></td>
                <td th:text="${item.orderCount}"></td>
                <td th:text="${item.orderAmount}"></td>

                <td>
                    <a th:href="@{/live/data_report_detail(id=${item.getId()})}">查看详情</a>


                </td>
            </tr>
        </table>
    </div>
    <!-- end dd-wrapper -->
    <div class="layui-box layui-laypage layui-laypage-default pageBox">
        <paging:pager th:value="${pageIndex}" th:rows="${totalSize}" th:size="${pageSize}"/>
    </div>

    <!--<script src="/jquery-3.3.1.min.js"></script>-->
    <!--    <script type="text/javascript" src="/goods/Tips/Tips.min.js"></script>-->
    <script type="text/javascript">
        var layer;
        var $;
        var windowOpen;

        //计算天数差的函数，通用
        function DateDiff(sDate1, sDate2) { //sDate1和sDate2是2019-3-12格式
            var aDate, oDate1, oDate2, iDays
            aDate = sDate1.split("-")
            oDate1 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]) //转换为9-25-2017格式
            aDate = sDate2.split("-")
            oDate2 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0])
            iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24) //把相差的毫秒数转换为天数
            return iDays
        }

        layui.use(['laydate', 'jquery', 'form', 'layer'], function () {
            var laydate = layui.laydate;
            $ = layui.jquery;
            var form = layui.form;
            layer = layui.layer;
            laydate.render({
                elem: '#startTime'
            });
            laydate.render({
                elem: '#endTime'
            });
            //下拉框默认值
            // var shopId = '[[${shopId}]]';
            // if(shopId!='')
            //     $("#shopId").val(shopId);
            var accountId = '[[${accountId}]]';
            if(accountId!='')
                $("#accountId").val(accountId);

            form.render();
            $(function () {

            })
        });



    </script>


</div>
</body>
</html>
